<template>
  <div v-if="value">
    <a-link type="text" @click="show" style="text-decoration: underline; text-underline-offset: 4px; color: #1890ff"> {{ title }} </a-link>
    <ImagePreview :src="imgUrl" :visible="visible" @close="visible = false" />
  </div>
</template>

<script setup>
  import { computed, ref } from 'vue'
  import { ImagePreview } from '@arco-design/web-vue'
  import { getFileInfo } from '@/api/common/index.js'

  const props = defineProps({
    value: {
      type: [String, Number],
      required: true,
    },
    file: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '点击查看',
    },
  })

  const imgUrl = computed(() => {
    return `${import.meta.env.VITE_BASE_PATH}/uploadFile/image/${props.value}`
  })

  const visible = ref(false)
  const show = () => {
    // 传入的是附件
    if (props.file !== false) {
      getFileInfo({ id: props.value }).then((res) => {
        const result = res.result
        if (result) {
          const fileName = result.originalFileName
          const fileExt = fileName.split('.').pop().toLowerCase()
          // 图片预览
          if (['jpg', 'jpeg', 'png'].includes(fileExt)) {
            visible.value = true
          } else {
            window.open(imgUrl.value)
          }
        }
      })
    } else {
      visible.value = true
    }
  }
</script>
